<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">在线考试系统</div>
      <el-form
        :model="param"
        :rules="rules"
        ref="login"
        label-width="0px"
        class="ms-content"
      >
        <el-form-item prop="userAccount">
          <el-input v-model="param.userAccount" placeholder="账号">
            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="passWord">
          <el-input type="password" placeholder="密码" v-model="param.passWord">
            <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="valiCode">
          <el-input
            type="text"
            placeholder="验证码"
            v-model="param.valiCode"
            @keyup.enter.native="submitForm()"
          >
            <el-button slot="prepend" icon="el-icon-lx-warn"></el-button>
          </el-input>
          <div style="height: 32px; padding-top: 15px">
            <img :src="valicodeImg" style="height: 32px; width: 96px" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" @click="getvaliCode()">看不清，换一张</a>
          </div>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm()">登  录</el-button>
        </div>
        <div class="login-btn">
          <el-button type="primary" @click="register()">去注册</el-button>
        </div>
      </el-form>
    </div>

    
  <el-dialog title="注册" :visible.sync="addVisible" width="30%" top="10vh">
      <el-form ref="addform" :model="addform" label-width="70px" :rules="rules2">
        <el-form-item label="账号" prop="userAccount">
          <el-input type="text" v-model="addform.userAccount"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="userName">
          <el-input type="text" v-model="addform.userName"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="userSex">
          <el-select v-model="addform.userSex">
            <el-option key="man" label="男" value="男"></el-option>
            <el-option key="male" label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="userPhone">
          <el-input type="text" v-model="addform.userPhone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="userEmail">
          <el-input type="text" v-model="addform.userEmail"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="fkClassId">
          <el-select v-model="addform.fkClassId" placeholder="请选择">
            <el-option
              v-for="item in classes"
              :key="'class-' +item.id"
              :value="item.id"
              :label="item.className"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="新密码" prop="userPwd">
            <el-input type="password" v-model="addform.userPwd"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPwd">
            <el-input type="password" v-model="addform.checkPwd"></el-input>
          </el-form-item>
          <el-form-item prop="valiCode" label="验证码">
          <el-input
            type="text"
            placeholder="验证码"
            v-model="addform.valiCode"
          >
          </el-input>
          <div style="height: 32px; padding-top: 15px">
            <img :src="valicodeImg" style="height: 32px; width: 96px" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" @click="getvaliCode()">看不清，换一张</a>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAdd"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
  
  </div>
  
</template>

<script>
import validatecommon from "../../utils/validateutils";
var _this;
export default {
  data: function () {
     var validatePwd2 = (rule, value, callback) => {
      if (this.addform.userPwd === this.addform.checkPwd) {
        callback();
      } else {
        callback(new Error("两次密码不一致"));
      }
    };
    return {
      valicodeImg: "",
      addVisible: false,
      addform: {},
      classes: [],
      rules2: {
        userPhone: [{ validator: validatecommon.validatePhone, trigger: "blur" }],
        userEmail: [{ validator: validatecommon.validateEmail, trigger: "blur" }],
        userAccount:[{ required: true, message: '请输入登录账号', trigger: 'blur' }],
        userName:[{ required: true, message: '请输入姓名', trigger: 'blur' }],
        userPwd: [{ validator: validatecommon.validatePwd, trigger: "blur" }],
        checkPwd: [{ validator: validatePwd2, trigger: "blur" }],
        valiCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      param: {
        userAccount: "",
        passWord: "",
        valiCode: "",
        codeUuid: "",
      },
      rules: {
        userAccount: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
        valiCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  methods: {
    async submitForm() {
      await this.$refs.login.validate((valid) => {
        if (valid) {
          this.$post("/login/checklogin", this.param).then((res) => {
            if (res.code === 0) {
              this.$message.success("登录成功");
              sessionStorage.setItem("ClientToken", res.data.ClientToken);
              sessionStorage.setItem("userName",res.data.userName)
              sessionStorage.setItem("userId",res.data.userId)
              this.$router.push("/");
            } else {
              this.$message.error(res.msg);
              this.getvaliCode()
            }
          });
        } else {
          this.$message.error("请输入账号和密码");
          console.log("error submit!!");
          return false;
        }
      });
    },
    getvaliCode() {
      this.$post("/login/validateCode", {}).then((res) => {
        this.valicodeImg = res.data.codeImage;
        this.param.codeUuid = res.data.codeUuid;
        this.addform.codeUuid = res.data.codeUuid;
      });
    },
    async register(){
       await this.$post('/class/getall', null).then(res=>{
        if (res.code === 0) {
          this.classes = res.data
        }else{
          this.$message.error("获取班级列表失败！")
        }
      })
      this.addVisible = true;
    },
    saveAdd(){
      this.$refs.addform.validate((valid) =>{
        if (valid) {
          this.$post('/login/register', this.addform).then(res =>{
            if (res.code === 0) {
              this.$message.success("注册成功！")
              this.addform = {}
              this.getvaliCode()
              this.addVisible = false;
            }else{
              this.$message.error(res.msg);
            }
          })
        }
      })
    }
  },
  created() {
    this.getvaliCode();
    _this = this
  },
};
</script>

<style scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  /* background-image: url(../../assets/img/login-bg.jpg); */
  background-image: url(../../assets/img/login2.jpeg);
  background-size: 100%;
}
.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}
.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.ms-content {
  padding: 30px 30px;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}
.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
</style>
